<template>
  <div class="todoapp">
    <TodoHeader :arr="showArr" @sendData="addTaskFn"></TodoHeader>
    <TodoMain :arr="showArr" @sendData="delTaskFn"></TodoMain>
    <TodoFooter
      :arr="showArr"
      @clearData="clearFn"
      @sendData="getBtnType"
    ></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
/**
 * 需求1：点击底部按钮，切换显示不同的数据
 *  也就是说现在页面上不能把全局数据显示出来了，
 * 之前是把整个list传给子组件进行显示的，现在不能显示全部了，因此不能把所有数据都传给子组件了
 * 那么传什么给子组件来显示数据呢？
 *  答：需要根据用户点击的按钮类型筛选想要显示出来的数据，并传递给子组件。
 *  比如：用户点击了“未完成”，那么我们就要从list数组中筛选出“未完成”的任务，传递给子组件进行显示
 *
 * 那么如何筛选呢？
 *  答：可以用到计算属性  --- 特点：当一个变量的值依赖其他变量的得来的时候就可以用到计算属性，并且计算属性有缓存功能，提供渲染性能
 *   所以就选这个计算属性来完成这个功能了
 * 实现步骤：
 * 1、声明一个计算属性showArr用来显示筛选出来的数据
 * 2、按钮类型哪里才有？子组件才有，因此，在子组件中点击按钮的时候需要“子传父”，把按钮类型传递给父组件
 * 3、在showArr计算属性中，通过用户点击的按钮类型来筛选数据返回给showArr
 *
 */
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list-71")) || [],
      curType: "all",
    };
  },
  methods: {
    // 新增任务
    addTaskFn(name) {
      let id = this.list.length ? this.list[this.list.length - 1].id + 1 : 100;
      this.list.push({
        id: id,
        name: name,
        isDone: false,
      });
    },
    // 删除任务
    delTaskFn(id) {
      // splice( 删除的下标值，删除个数 )
      let index = this.list.findIndex((item) => item.id == id);
      this.list.splice(index, 1);
    },
    // 点击底部按钮的时候，接收按钮类型
    getBtnType(type) {
      console.log(62, type);
      //  保存当前用户点击的按钮类型，以便在计算属性中使用
      this.curType = type;
    },
    // 清除已完成
    clearFn() {
      this.list = this.list.filter((item) => {
        return item.isDone == false;
      });
    },
  },
  computed: {
    showArr() {
      if (this.curType === "yes") {
        // 已完成的
        return this.list.filter((item) => {
          return item.isDone == true;
        });
      } else if (this.curType == "no") {
        // 未完成
        return this.list.filter((item) => {
          return item.isDone == false;
        });
      } else {
        return this.list;
      }
      // return [];
    },
  },
  watch: {
    list: {
      deep: true, // 深度侦听
      handler(arr) {
        // 存数据
        localStorage.setItem("list-71", JSON.stringify(arr));
      },
    },
  },
};
</script>

<style>
</style>